<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>果然FruitC</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
		<link href="${ctx }/shop/css/amazeui.min.css" rel="stylesheet" type="text/css" />
		<link href="${ctx }/shop/css/style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="${ctx }/shop/css/swiper.min.css"/>
		<style>
			.nav_header img{
				width:100%;
			}
			.am-slider-default .am-control-nav{ text-align: center;}
			.am-slider-default .am-control-nav li a.am-active{ background: #cb2527;}
			.am-slider-default .am-control-nav li a{ border: 0; width: 10px; height: 10px;}
		</style>
	</head>
	<body>
		<header data-am-widget="header" class="am-header am-header-default sq-head ">
			<div class="am-header-left am-header-nav">
				<a href="javascript:history.go(-1)" class="">
					<i class="am-icon-chevron-left"></i>
				</a>
			</div>
			<h1 class="am-header-title">
  	            <a  class="">商品详情</a>
            </h1>
	    </header>
	    <div style="height: 49px;"></div>
 			<nav class="swiper-container nav_header">
	            <div class="swiper-wrapper nav_box">
	            	<c:forEach items="${gift.imgs }" var="record">
	            	 <div class="swiper-slide" onclick="toUrl('${record.url_}')">
	            	 	<img data-original="${record.img_}" src= "${record.img_}" class="product_img lazy1"/>
	            	 </div>
	            	</c:forEach>
	            	
	            </div>
	            <div class="swiper-pagination"></div>
	        </nav>	
		<div class="detal-info" style="position: relative; width: 100%;">
			<p style="width:100%;">${gift.name_ }</p>
			<h2>商城价：<span>￥${gift.price_ }</span></h2>
			<!--<div class="heart">
				<img src="images/herat.png" width="25" id="imgflag" onclick="changeImage()" />
				<p>收藏</p>
			</div>-->
		</div>
		<div class="d-amount">
        	<h4>数量：</h4>
            <div class="d-stock">
              <a class="decrease">-</a>
                <input id="num" readonly class="text_box"  type="text" value="1">
                <input id="id" type="hidden" value="${gift.id }">
                <a class="increase">+</a>
            </div>
        </div>
        <div style="background: #eee; height: 10px;"></div>
        <div class="am-tabs detail-list" data-am-tabs>
		  <ul class="am-tabs-nav am-nav am-nav-tabs">
		    <li class="am-active"><a>商品详情</a></li>
		    <li ><a>商品评论</a></li>
		  </ul>
		
		  <div class="am-tabs-bd">
		    <div class="am-tab-panel am-fade am-in am-active detail " id="tab1" >
		          ${gift.desc_ }
		    </div>
		    <div class="am-tab-panel am-fade detail " id="tab2">
		        <ul class="comment-pic">
		        	<c:forEach items="${comments}" var="record">
		        	  	<li>
			         		<div class="tit">
			         			<img src="${record.img_ }" class="tx" />
			         			<c:choose>
			         				<c:when test="${record.nick_name_.length()>8}">
			         					<span>${record.nick_name_.toString().substring(0,8) }</span>
			         				</c:when>
			         				<c:otherwise>
			         					<span>${record.nick_name_}</span>
			         				</c:otherwise>
			         			</c:choose>
			         			<i> [${record.time_.toString().substring(0,19)}]</i>
			         		</div>
			         		<div class="comment-con">
			         			${record.content_ }
			         		</div>
			         	</li>
		        	</c:forEach>
		         </ul>
		         
		    </div>
		  </div>
		</div>
		
		
		<!--底部-->
 <div style=" height: 55px;"></div>
 <ul class="fix-shopping">
 	<li><a href="javascript:shopcar()" class="join">加入购物车</a></li>
 	<li><a href="javascript:bynow()" class="imm-buy">立即购买</a></li>
 </ul>
 <script src="${ctx }/shop/js/jquery-1.10.2.min.js"></script>
 <script src="${ctx }/shop/js/util.js"></script>
 <script src="http://qiniu.qlm.im/shop/js/swiper.min.js"></script>
	</body>
 <script>
 
 	function shopcar(){
 		var id = "${gift.id}";
 		var count = $("#num").val();
 		sendReq("${ctx}/addShopCar",{id:id,count:count},function(data){
 			hit_box_one(data.msg,'','','我知道啦','');
 		});
 	}
 	
 	function bynow(){
 		var id = "${gift.id}";
 		var count = $("#num").val();
 		sendReq("${ctx}/addShopCar",{id:id,count:count},function(data){
 			window.location.href = "${ctx}/shopcar";
 		});
 	}
	//购物数量加减
	$(function(){
		$(".am-nav-tabs li").click(function(){
			var self = this;
			if($(self).hasClass("am-active")){
				return;
			}else{
				$(".am-nav-tabs .am-active").removeClass("am-active");
				var index = $(".am-nav-tabs li").index(this);
				$(self).addClass("am-active");
				if(index == 0){
					$("#tab1").addClass("am-active am-in")
					$("#tab2").removeClass("am-active am-in");
				}else{
					$("#tab2").addClass("am-active am-in")
					$("#tab1").removeClass("am-active am-in");
				}
			}
		});
		var swiper = new Swiper('.nav_header', {
		      pagination: '.swiper-pagination',
		      autoplay : 1000,
		      paginationClickable: false
		 	 });
	
		$('.increase').click(function(){
			var self = $(this);
			var current_num = parseInt(self.siblings('input').val());
			current_num += 1;
			$("#num").val(current_num);
			//update_item(self.siblings('input').data('item-id'));
		})		
		$('.decrease').click(function(){
			var self = $(this);
			var current_num = parseInt(self.siblings('input').val());
			if(current_num > 1){
				current_num -= 1;
				$("#num").val(current_num);
				//update_item(self.siblings('input').data('item-id'));
			}
		})
	})
</script>
<%@include file="../common/jsticket.jsp"%><!--静态包含-->  
	</body>
</html>
